<template>
  <!-- ECUID查询下拉组件 -->
  <a-select
    v-model="ecuModuleId"
    showSearch
    allow-clear
    :filter-option="false"
    :placeholder="$t('pleaseSelect') + $t('lingjian')"
    mode="default"
    style="width: 100%"
    @search="getEcuList"
    @focus="clearEcuList"
    :notFoundContent="isSearch ? $t('noData') : $t('ecuNameSearch')"
  >
    <a-select-option
      v-for="(item, index) in ecuList"
      :key="index"
      :value="item"
      :title="item"
    >
      {{ item }}
    </a-select-option>
  </a-select>
</template>
<script>
export default {
  components: {
  },
  props: {
    defaultValue: {
      type: [String, Array, Object, undefined],
      default () {
        return undefined
      }
    },
    placeholder: {
      type: String,
      default: 'ECUID'
    }
  },
  model: {
    // 绑定的值，通过父组件传递
    prop: 'defaultValue',
    // 自定义事件名
    event: 'change'
  },
  computed: {
    ecuModuleId: {
      get () {
        return this.defaultValue
      },
      set (val) {
        this.$emit('change', val)
      }
    }
  },
  data () {
    return {
      ecuList: [],
      isSearch: false
    }
  },
  watch: {
  },
  created () {
  },
  methods: {
    getEcuList (value = '') {
      this.ecuList = []
      this.isSearch = false
      if (!value) return
      this.isSearch = true
      this.$api.getAllEcu({ ecuModuleId: value.trim() }).then(response => {
        response.data.forEach((item) => {
          this.ecuList.push(item.ecuModuleId)
        })
        this.ecuList = [...new Set(this.ecuList)]
      })
    },
    // 清空之前的搜索结果
    clearEcuList () {
      this.ecuList = []
      this.isSearch = false
    }
  }
}
</script>
